<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!--/*@thymesVar id="novel" type="net.wlgzs.futurenovel.bean.Novel"*/-->
<!--/*@thymesVar id="chapter" type="net.wlgzs.futurenovel.bean.NovelChapter"*/-->
<!--/*@thymesVar id="section" type="net.wlgzs.futurenovel.model.Section"*/-->

<head>
    <meta charset="UTF-8">
    <title th:text="|${novel.title} - ${chapter.title} - ${section.title}|">未来小说网--阅读中</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../../resources/css/all.css" type="text/css" th:href="@{/resources/css/all.css}">
    <link rel="stylesheet" href="../../resources/css/read-book.css" type="text/css" th:href="@{/resources/css/read-book.css}">
    <link rel="stylesheet" href="../../resources/font/iconfont.css" th:href="@{/resources/font/iconfont.css}">
    <link rel="stylesheet" href="../../resources/css/fix-nav.css" type="text/css" th:href="@{/resources/css/fix-nav.css}">
</head>

<body>
    <!-- 导航栏 -->
    <div class="btn-box">
        <!-- 这个是向上和向下的按钮 -->
        <img id="shang" src="../static/resources/img/top.png" th:src="@{/resources/img/top.png}" height="200" width="200"/>
        <img id="xia" src="../static/resources/img/top.png" th:src="@{/resources/img/top.png}" height="200" width="200" style="transform: rotate(180deg)"/>
    </div>
    <div class="read-header">
        <div class="wrap-center" id="readHeader">
            <h1 class="top-logo">未来小说网</h1>
            <div class="nav-list min-user fr">
                <ul>
                    <li id="min-search">
                        <form id="form" method="POST" target="_blank" th:action="@{/search(page=1)}">
                            <input class="search-box" id="goSearch" name="keywords" type="text" placeholder="请输入..." style="padding: 5px;">
                            <input id="keyword" class="fixed-input hide" style="margin-left: 10px;margin-right: 4px;" type="hidden" name="searchBy" value="KEYWORDS">
                            <input class="submit-input" type="hidden" id="searchSubmitType" name="sortBy" value="BEST_MATCH">
                            <button id="search-btn" for="searchSubmit" type="submit" style="background-color: #2470bf;">
                                <a style="padding-left: 5px;">
                                    <i class="fa fa-search" style="font-size:16px;color: #ffffff;margin: 16px 20px 0 0;"></i>
                                 </a>
                            </button>
                        </form>
                        <li class="line"></li>
                    </li>
                    <li class="sign-out" th:if="${session.currentAccount} eq null">
                        <a id="fixed-login" th:href="@{/login(redirectTo=${@templateController.getRequestUri()}, errorMessage='请先登录')}">登录</a>
                        <a class="reg" th:href="@{/register}" target="_blank">注册</a>
                    </li>
                    <li class="sign-out" th:if="${session.currentAccount} ne null" th:each="user:${session.currentAccount}">
                        <a th:text="${user.userName}"></a>
                        <a th:text="${user.experience+'积分'}"></a>
                    </li>
                    <li class="line"></li>
                    <li class="book-shelf" id="top-book-shelf">
                        <a th:if="${session.currentAccount} ne null" th:href="${#request.contextPath}+'/user/'+${session.currentAccount.uid.toString()}" target="_blank">
                            <i class="fa fa-book" style="font-size:16px">我的书架</i>
                        </a>
                    </li>
                    <li class="avatar" th:each="user:${session.currentAccount}">
                        <a th:href="${#request.contextPath}+'/user/'+${session.currentAccount.uid.toString()}" target="_blank">
                            <img th:if="${session.currentAccount} eq null" src="../../resources/img/avatar.png" th:src="@{/resources/img/avatar.png}" style="border-radius: 50%">
                            <img th:if="${session.currentAccount} ne null" th:src="${user.profileImgUrl}" style="border-radius: 50%;width: 40px;height: 40px;">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="wrap" style="background-color: #f5f5f5;padding-top: 20px;">
        <!-- 中间阅读 -->
        <div class="main-read">
            <div id="chapterBox">
                <!-- 中间阅读首页 -->
                <div class="text-wrap" id="chapter-0" th:object="${novel}">
                    <p style="display: none" id="getNovelId" th:text="*{uniqueId}"></p>
                    <div class="book-cover-wrap">
                        <div class="book-photo">
                            <img th:if="*{coverImgUrl}" th:src="*{coverImgUrl}"/>
                            <img th:unless="*{coverImgUrl}" th:src="@{/resources/img/loading.jpg}"/>
                        </div>
                        <h1 th:text="*{title}">万族之劫</h1>
                        <h2 th:each="author : *{authors}">
                            <a target="_blank" th:text="${author}">老鹰吃小鸡</a>著
                        </h2>
                        <div class="info-list cf">
                            <ul>
                                <li style="width: 200px;text-align: center">
                                    <p th:text="*{tags}">都市</p>
                                    <span>类型</span>
                                </li>
                                <li style="width: 230px;text-align: center;">
                                    <p th:text="*{{pubdate}}">2020.02.06</p>
                                    <span>上架</span>
                                </li>
                                <li style="width: 100px;text-align: center">
                                    <p><i th:text="|${section.text.length()}|">330.67</i></p>
                                    <span>连载（字）</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 中间阅读章节内容 -->
                <div class="text-wrap" id="chapter-1">
                    <div class="main-text-wrap">
                        <div class="text-head">
                            <h3 class="chapterName">
                                <span class="content-wrap" th:text="|${chapter.title} - ${section.title}|"> 第1章 父子</span>
                                <p id="getSectionId" style="display: none" th:text="${section.uniqueId}"></p>
                                <span class="review-count">
                                    <i><cite></cite></i>99
                                </span>
                            </h3>
                            <div class="text-info cf">
                                <div class="info fl">
                                    <a target="_blank">
                                        <i class="fa fa-file" style="font-size:16px;display: inline-block;min-width: 16px;margin-right: 6px;vertical-align: -2px;"></i> <a th:text="${novel.title}">万族之劫</a>
                                    </a>
                                    <a target="_blank">
                                        <i class="fa fa-user-circle" style="font-size:16px;display: inline-block;min-width: 16px;margin-right: 6px;vertical-align: -2px;"></i> <a th:each="author : ${novel.authors}" th:text="|${author} |">老鹰吃小鸡</a>
                                    </a>
                                    <i class="fa fa-file-text" style="font-size:16px;color: rgba(0, 0, 0, .4);display: inline-block;min-width: 16px;margin-right: 6px;vertical-align: -2px;" th:text="|${section.text.length()}字|">3152字</i>
                                    <i class="fa fa-clock-o" style="font-size:16px;display: inline-block;min-width: 16px;margin-right: 6px;vertical-align: -2px;">2020.02.06 13:52</i>
                                </div>
                                <div class=""></div>
                            </div>
                        </div>
                        <div class="read-content" th:utext="${section.text}"></div>
                        <div class="admire-wrap">
<!--                            <a class="report-btn" id="reportBtn"><i class="fa fa-exclamation-triangle" style="font-size:18px;display: inline-block;min-width: 18px;margin-right: 3px;vertical-align: -2px;"></i>举报</a>-->
                            <div class="read-btn-box">
                                <a class="admire admireBtn reward" th:if="${session.currentAccount} ne null" href="javascript:;">赞赏</a>
                                <a class="admire admireBtn reward" th:if="${session.currentAccount} eq null" th:href="@{/login(redirectTo=${@templateController.getRequestUri()})}">赞赏</a>
                            </div>
                        </div>

                        <div class="our-say-wrap">
                            <h3>评论</h3>
                            <ul id="comment">

                            </ul>
                            <div class="send-textarea">
                                <select id="rating">
                                    <option selected>选择评分</option>
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                    <option>6</option>
                                    <option>7</option>
                                    <option>8</option>
                                    <option>9</option>
                                    <option>10</option>
                                </select>
                                <textarea placeholder="有想法快写下来吧..." id="sendTextarea"></textarea>
                                <div class="text-tools fr">
                                    <a href="javascript:;" class="blue-btn" type="submit" id="commentSure" th:if="${session.currentAccount} ne null">发表</a>
                                    <a href="javascript:;" class="blue-btn" type="submit" id="commentSure" th:if="${session.currentAccount} eq null" th:href="@{/login(redirectTo=${@templateController.getRequestUri()})}">发表</a>
                                    <i id="textLength">0</i><i>/150</i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 切换章节 -->
                <div class="chapter-control">
                    <a id="chapterPrev" th:if="${previewSection} ne null" th:href="${#request.contextPath}+'/novel/'+${novel.uniqueId.toString()}+'/read?sectionId='+${previewSection.uniqueId.toString()}">上一节</a>
                    <span></span>
                    <a href="../../WEB-INF/thymeleaf/look-book.html" th:href="${#request.contextPath}+'/novel/'+${novel.uniqueId.toString()}+'/view#freeRead'" target="_blank">目录</a>
                    <span></span>
                    <a id="chapterNext" th:if="${nextSection} ne null" th:href="${#request.contextPath}+'/novel/'+${novel.uniqueId.toString()}+'/read?sectionId='+${nextSection.uniqueId.toString()}">下一节</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 左边导航条 -->
    <div class="float-wrap" id="floatWrap">
        <div class="left-bar-list" id="leftBarList">
            <dl>
                <dd id="navCatalogBtn">
                    <a>
                        <i class="fa fa-list" style="font-size:20px;display: block;width: 16px;height: 16px;margin: 0 auto 6px;transition: color .3s;color: #000;"></i>
                        <span>目录</span>
                    </a>
                </dd>
                <dd>
                    <a th:if="${session.currentAccount} ne null" th:href="${#request.contextPath}+'/user/'+${session.currentAccount.uid.toString()}" target="_blank">
                        <i class="fa fa-book" style="font-size:20px;display: block;width: 16px;height: 16px;margin: 0 auto 6px;transition: color .3s;color: #000;"></i>
                        <span>书架</span>
                    </a>
                </dd>
                <dd>
                    <a href="../../WEB-INF/thymeleaf/look-book.html" th:href="${#request.contextPath}+'/novel/'+${novel.uniqueId.toString()}+'/view'">
                        <i class="fa fa-file-o" style="font-size:20px;display: block;width: 16px;height: 16px;margin: 0 auto 6px;transition: color .3s;color: #000;"></i>
                        <span>书页</span>
                    </a>
                </dd>
                <dd>
                    <a class="reward">
                        <i class="fa fa-rmb" style="font-size:20px;display: block;width: 16px;height: 16px;margin: 0 auto 6px;transition: color .3s;color: #000;"></i>
                        <span>打赏</span>
                    </a>
                </dd>
            </dl>
            <!-- 目录面板 -->
            <div class="panel-wrap catalog" id="catalog" style="display: none;">
                <div class="panel-box">
                    <div class="catalog-tab">
                        <span class="actinfocata">目录</span>
                    </div>
                    <div class="panel-list-wrap" id="catalogList">
                        <div class="volume-list" style="display: block;">
                            <ul class="cf" th:each="chapter1 : ${novel}">
                                <li th:each="section1 : ${chapter1}">
                                    <a th:href="${#request.contextPath}+'/novel/'+${novel.uniqueId.toString()}+'/read?sectionId='+${section1.uniqueId.toString()}" target="_blank" th:text="|${chapter1.title} - ${section1.title}|">第1章 父子</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 1000);return false;});
    $('#xia').click(function(){$('html,body').animate({scrollTop: $('#commentSure').offset().top},1000);return false;});
    window.onmouseover = function() {
        var navCatalogBtn = document.getElementById("navCatalogBtn");
        var catalog = document.getElementById("catalog");

        navCatalogBtn.onmouseover = function() {
            catalog.style.display = "block";
            navCatalogBtn.classList.add("act");
        }
        navCatalogBtn.onmouseout = function() {
            catalog.style.display = "none";
            navCatalogBtn.classList.remove("act");
        }
        catalog.onmouseover = function() {
            catalog.style.display = "block";
            navCatalogBtn.classList.add("act");
        }
        catalog.onmouseout = function() {
            catalog.style.display = "none";
            navCatalogBtn.classList.remove("act");
        }
    }
</script>
<script>
    $("#pinglun").click(function() {
        $("#send-textarea").show();
    });
    $("#quxiao").click(function() {
        $("#send-textarea").hide();
    });

</script>
<script th:inline="javascript" async>
    function popup_over(icon, color, contant) {
        $('body').append('<div class="popup_over" style="text-align: center; line-height: 80px; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: white; position: fixed; width: 180px; height: 80px; border: 1px solid #D5D6D5; z-index: 1000;"><i class="iconfont ' + icon + '" style="font-size: 30px;color: ' + color + ';"></i><span style="font-size: 16px; position: relative; bottom: 5px;"> ' + contant + '</span></div>');
        setTimeout(function() {
            $('.popup_over').remove();
            // clear('.popup_over');
        }, 1500)
    };
    $("#commentSure").click(function () {
        addComment();
    })
    //添加评论
    function addComment() {
        const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
        if($("#rating").val()=='选择评分')
            popup_over('icon-sad','#d81e06',"请选择评分");
        else if($("#sendTextarea").val()==0)popup_over('icon-sad','#d81e06',"评论内容不能为空");
        else{
        $.ajax({
            url:contextPath+"/api/novel/section/"+$("#getSectionId").text()+"/comment",
            datatype:"JSON",
            type:"POST",
            contentType: "application/json;charset=UTF-8",
            data:JSON.stringify({
                rating:$("#rating").val(),
                text:$("#sendTextarea").val(),
            }),success:function (data) {
                    popup_over('icon-happy-l','#00ff0f',"评论成功");
                    setTimeout(function () {
                        window.location.reload();
                    },1500);

            },error: function(data) {
                console.log(data);
            }
        })
        }
    }
    //删除评论
    $(".our-say-wrap").on("click",".remove",function () {
        var str=$(this).attr("commentId");
        removeComment(str);
    })
    function removeComment(uniqueId) {
        const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
        $.ajax({
            url:contextPath+"/api/comment/"+uniqueId,
            type:"DELETE",
            datatype:"JSON",
            contentType: "application/json;charset=UTF-8",
            data:{},
            success:function (data) {
                popup_over('icon-happy-l','#00ff0f',"删除成功");
                setTimeout(function () {
                    window.location.reload();
                },1500);
            },error:function (data) {
                console.log(data);
                popup_over('icon-sad','#d81e06',"无修改权限");
            }
        })
    }
    function getSectionComment(page) {
        const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
        $.ajax({
            url:contextPath+"/api/novel/section/"+$("#getSectionId").text()+"/comment/get",
            datatype:"JSON",
            type:"GET",
            contentType: "application/json;charset=UTF-8",
            data:{
                per_page:5,
                page:page
            },success:function (data) {
                if(data!=undefined){
                for(var i=0;i<data.length;i++){
                    $("#comment").append("<p id='AccountID' style='display: none'>" + "" + data[i].accountId+ "" + "</p>")
                    $("#comment").append("<li>\n" +
                        "<img style='cursor:pointer;' id='btn' src='" + "" + data[i].profileImgUrl+ "" + "' class=\"profileImgUrl\" alt=\"\">\n" +
                        "<div class=\"our-say cf\"\n" +
                        "<h4>\n" +
                        "<a>"+""+data[i].userName+""+"</a><a class='as' style='margin-left: 10px'>等级："+""+data[i].level+""+"</a>\n" +
                        "</h4>\n" +
                        "<p id=\"\">"+""+data[i].text+""+"</p>\n" +
                        "<p>评分："+""+data[i].rating+""+"</p>\n" +
                        "<a type=\"button\" class=\"remove\" commentId='"+""+data[i].uniqueId+""+"' style=\"color: rgb(179, 174, 174);font-size: 14px;cursor: pointer;\">删除</a>\n" +
                        "<a class='as' style='float: right'>"+""+data[i].createTime+""+"</a></div>\n" +
                        "</li>");
                }
                }
            },error:function (data) {
                console.log(data)
            }
        })
    }
    getSectionComment(1);
    //赞赏功能
    function rewardFun(novelId) {
        const contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
        $.ajax({
            url:contextPath+"/api/novel/"+novelId+"/donate",
            type:"GET",
            datatype: "json",
            contentType: "application/json;charset=UTF-8",
            data:{
                count:1
            },
            success:function (data) {
                popup_over('icon-happy-l','#00ff0f',"赞赏成功");
                setTimeout(function () {
                    window.location.onload();
                },1500)
            },error:function (data) {
                console.log(data);
            }
        })
    }
    $(".reward").click(function () {
        const str= $("#getNovelId").text();
        rewardFun(str);
    })
    $('#sendTextarea').bind('input propertychange', function() {
        var borrowValue = $(this).val();
        var repayValue = borrowValue.length;
        $("#textLength").html(repayValue);
    });
    $("#comment").on("click","#btn",function () {
        const contextPath = /*[[${#request.getContextPath()}]]*/ 'http://localhost:8080/future-novel';
        window.location.href=contextPath+'/user/'+$("#AccountID").text();
    })
</script>



</html>